<template>
    <div class="sound">
      <div class="sound-left"></div>
      <div class="sound-right">
        <div class="sound-back" ref="back" @click="onBackHandle"></div>
        <div
          class="sound-body"
          :style="{ transform: 'translate(' + inTranWidth + 'px, 0px)' }"
        >
          <div class="sound-num">{{ num }}%</div>
          <div class="sound-dot" ref="dot"></div>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        originX: 0,
        ethight: 0,
        isStarting: true,
        inTranWidth: 0,
        oldTranWith: 0,
        num: 0,
        // soundImg: require("@/assets/images/video/sound.png"),
        // soundLightImg: require("@/assets/images/video/sound-light.png"),
        offsetX: null,
      };
    },
    mounted() {
      this.initPageInfo();
    },
    computed: {},
    methods: {
      initPageInfo() {
        this.$nextTick(() => {
          // 获取DOM元素
          let dragArea = this.$refs.dot;
          // 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
          let clientOffset = {};
          let that = this;
          let offsetX = dragArea.getBoundingClientRect().left;
          this.offsetX = offsetX;
          // 绑定鼠标按下事件
          dragArea.addEventListener(
            "mousedown",
            (event) => {
              // 获取当前的x轴距离
              let nowOffsetX = dragArea.getBoundingClientRect().left;
              let bodyWidth = this.$refs.back.offsetWidth;
              let dotWidth = this.$refs.dot.offsetWidth;
              if (
                event.clientX - nowOffsetX < dotWidth &&
                event.clientY - nowOffsetX < dotWidth
              ) {
                that.isStarting = true;
              }
              clientOffset.clientY = event.clientY;
              // 鼠标移动的时候不停的修改div的left和top值
              document.onmousemove = function (moe) {
                if (!that.isStarting) {
                  return;
                }
                const diff = moe.clientX - offsetX;
                if (bodyWidth - dotWidth < diff) {
                  that.inTranWidth = bodyWidth - dotWidth;
                } else {
                  if (that.inTranWidth < diff + that.oldTranWith) {
                    that.inTranWidth = diff;
                  }
                }
                that.oldTranWith = that.inTranWidth;
                that.num = (
                  (that.inTranWidth / (bodyWidth - dotWidth)) *
                  100
                ).toFixed(0);
                that.$emit("sound", that.num);
              };
              // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件；否则鼠标抬起后还可以继续拖拽方块
              document.onmouseup = function () {
                that.isStarting = false;
                document.onmousemove = null;
                document.onmouseup = null;
              };
            },
            false
          );
          // 绑定鼠标松开事件
          dragArea.addEventListener("mouseup", (event) => {
            that.isStarting = false;
          });
        });
      },
      onBackHandle(event) {
        if (this.offsetX) {
          let bodyWidth = this.$refs.back.offsetWidth;
          let dotWidth = this.$refs.dot.offsetWidth;
          if (event.clientX - this.offsetX - dotWidth < 0) {
            this.oldTranWith = 0;
            this.inTranWidth = 0;
          } else {
            this.oldTranWith = event.clientX - this.offsetX - dotWidth;
            this.inTranWidth = event.clientX - this.offsetX - dotWidth;
          }
          this.num = ((this.inTranWidth / (bodyWidth - dotWidth)) * 100).toFixed(
            0
          );
          this.$emit("sound", this.num);
        }
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .sound {
    width: 670px;
    height: 50px;
    user-select: none;
    // background-color: pink;
    margin: 50px;
  
    .sound-left {
      float: left;
      height: 50px;
      line-height: 50px;
      margin-right: 14px;
      margin-top: -2px;
  
      img {
        width: 30px;
      }
    }
  
    .sound-right {
      float: left;
      height: 50px;
  
      .sound-back {
        width: 600px;
        height: 12px;
        background-color: #c5c5c5;
        border-radius: 10px;
        margin-top: 5px;
      }
  
      .sound-body {
        margin-top: -48px;
        text-align: center;
  
        .sound-num {
          height: 30px;
          line-height: 30px;
          text-align: left;
          color: #000;
          font-size: 16px;
        }
  
        .sound-dot {
          width: 26px;
          height: 26px;
          border-radius: 15px;
          position: absolute;
          background-color: pink;
          cursor: pointer;
          display: flex;
        }
  
        .dot-light {
          border: 1px solid #c5c5c5;
        }
      }
    }
  }
  </style>